@import "../../base.less";

@import "./_var.less";

@import "../../mixins/_text.less";

@import "../../mixins/_scrollbar.less";

@padding: @table-td-padding-vertical-top @table-td-padding-horizontal
  @table-td-padding-vertical-bottom @table-td-padding-horizontal;

.scrollbar {
  .scrollbar();
}

.@{prefix}-table {
  width: 100%;
  font-size: @table-font-size;
  color: @table--text-color;
  background-color: @table-bg;

  .bordered {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    border-left: 1px solid @table-border-color;
    pointer-events: none;
  }

  &__content {
    position: relative;
    .scrollbar();
  }

  &__pagination {
    padding: @table-padding-normal  @table-padding-horizontal;
    box-sizing: border-box;
  }

  .@{prefix}-icon {
    font-size: @font-size-l;
  }
  // table 标签基础样式
  table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
  }

  th,
  td {
    position: relative;
    padding: @padding;
    border-bottom: 1px solid @table-border-color;
    line-height: @table-line-height;
    vertical-align: middle;
    font-weight: normal;
    overflow-wrap: break-word;

    &:not([align]) {
      text-align: left;
    }
  }

  thead td,
  th {
    color: @table-head-text-color;
  }

  td[key="row-select"] {
    padding: @table-td-padding-vertical-top 0 @table-td-padding-vertical-bottom @table-td-padding-horizontal;
  }

  td,
  th {
    &.@{prefix}-align-left {
      text-align: left;
    }

    &.@{prefix}-align-right {
      text-align: right;
    }

    &.@{prefix}-align-center {
      text-align: center;
    }

    &.@{prefix}-text-ellipsis {
      .text-ellipsis();
    }
  }

  // 紧凑型表格
  &.@{prefix}-size-s {
    th,
    td {
      padding: @table-padding-small;
    }
  }

  // 宽松型表格
  &.@{prefix}-size-l {
    th,
    td {
      padding: @table-padding-large;
    }
  }

  // 展开/收起列
  .@{prefix}-table__expandable-icon-cell,
  .@{prefix}-table__selection-cell {
    padding: 0;
  }

  // @todo: 待优化
  .@{prefix}-radio,
  .@{prefix}-checkbox {
    line-height: 1;
    font-size: 0;
    vertical-align: middle;
  }

  .@{prefix}-loading {
    font-size: @table-loading-size;
  }

  // 边框线表格
  &--bordered {
    .@{prefix}-table__content {
      border-left: 1px solid @table-border-color;
    }
    .@{prefix}-table__empty {
      border-left: 1px  solid  @table-border-color;
      border-right: 1px  solid  @table-border-color;
    }
    // 表格边框优化，适配固定列/固定表头场景
    .@{prefix}-table__content {
      border: 1px solid @table-border-color;
      border-bottom: 0;
      border-radius: @border-radius;

      th {
        border-left: 1px solid @table-border-color;
        border-bottom: 1px solid @table-border-color;

        &:first-child {
          border-left: 0;

          &::before {
            border-left: 0;
          }
        }
      }

      td {
        border-left: 1px solid @table-border-color;
        border-bottom: 1px solid @table-border-color;

        &.@{prefix}-table__cell--fixed-left-last {
          & + td {
            border-left-width: 0;
          }

          &::before {
            border-right: 1px solid @table-border-color;
          }
        }

        &.@{prefix}-table__cell--fixed-left,
        &.@{prefix}-table__cell--fixed-right {
          border-left: 0;

          &::before {
            .bordered();
          }
        }

        &:first-child {
          border-left-width: 0;

          &::before {
            border-left: 0;
          }
        }
      }
    }

    .@{prefix}-table--loading {
      border-bottom: 1px solid @table-border-color;
    }

    .@{prefix}-table__pagination {
      border: 1px solid @table-border-color;
      border-top: 0;
    }

    // 固定表头表格底部边框线显示优化
    &.@{prefix}-table__header--fixed {

      .@{prefix}-table__content {
        border-bottom: 1px solid @table-border-color;

        tr {
          &:last-child {
            td {
              border-bottom: 0;
            }
          }
        }
      }
    }

    .@{prefix}-table__cell--sort-trigger {
      margin-left: auto;
    }
  }

  // 斑马线表格
  &--striped {

    &.@{prefix}-table__header--fixed {
      tbody tr:nth-of-type(even) {
        background-color: @table-highlight-bg-color;
      }
    }

    &:not(.@{prefix}-table__header--fixed) {
      tbody tr:nth-of-type(odd) {
        background-color: @table-highlight-bg-color;
      }
    }

    &.@{prefix}-table--hoverable {

      &.@{prefix}-table__header--fixed {
        tbody tr:nth-of-type(even):hover {
          background-color: @table-highlight-bg-color--hover;
        }
      }

      &:not(.@{prefix}-table__header--fixed) {
        tbody tr:nth-of-type(odd):hover {
          background-color: @table-highlight-bg-color--hover;
        }
      }

      tbody {
        tr {
          transition: background-color .3s ease-in;

          &:hover {
            background-color: @table-highlight-dark-bg-color;
          }
        }
      }
    }
  }

  // 可悬停表格
  &--hoverable {
    tbody {
      tr {
        transition: background-color .3s ease-in;

        &:hover {
          background-color: @table-highlight-dark-bg-color;
        }
      }
    }
  }

  // 文本顶端对齐
  &.@{prefix}-table--align-top {
    tbody {
      td {
        vertical-align: top;
      }
    }
  }

  // column highlight
  .@{prefix}-table__cell--highlight {
    background-color: @table-highlight-bg-color;
  }

  // 20200728 优化表头固定和列固定
  // 表头固定表格
  &__header--fixed {
    table {
      table-layout: fixed;
    }

    th,
    td {
      overflow-wrap: break-word;
      white-space: nowrap;
    }

    .@{prefix}-table__header {
      width: fit-content;
      position: relative;
      z-index: 10;
      background-color: @bg-color-secondarycontainer;
    }

    .@{prefix}-table__header {
      .scrollbar();
    }

    .@{prefix}-table__body {
      overflow-y: auto;
      width: fit-content;

      .scrollbar();
    }
  }

  &:not(&--bordered) &__cell {
    &--selectable {
      & + td {
        padding-left: 0;
      }
    }
  }

  // 列固定表格
  &__cell--fixed {

    &.@{prefix}-table__header--fixed {

      .@{prefix}-table__header {
        overflow: hidden;
        width: 100%;

        .@{prefix}-table__cell--fixed-left,
        .@{prefix}-table__cell--fixed-right {
          background-color: @bg-color-secondarycontainer;

          &:last-child::after {
            content: "";
            position: absolute;
            right: -6px;
            width: 6px;
            height: 100%;
            top: 0;
            background-color: @bg-color-secondarycontainer;
          }
        }
      }

      .@{prefix}-table__body {
        overflow: auto scroll;
      }
    }

    .@{prefix}-table__content {
      overflow: auto hidden;
    }

    table {
      table-layout: fixed;
      min-width: 100%;
      border-collapse: separate;
    }

    th,
    td {
      position: relative;
    }

    &.@{prefix}-table--striped {

      &.@{prefix}-table__header--fixed {
        tbody tr:nth-of-type(even) {

          .@{prefix}-table__cell--fixed-left,
          .@{prefix}-table__cell--fixed-right {
            background-color: @table-highlight-bg-color;
          }
        }
      }

      &:not(.@{prefix}-table__header--fixed) {
        tbody tr:nth-of-type(odd) {

          .@{prefix}-table__cell--fixed-left,
          .@{prefix}-table__cell--fixed-right {
            background-color: @table-highlight-bg-color;
          }
        }
      }
    }

    .@{prefix}-table__cell--fixed-left,
    .@{prefix}-table__cell--fixed-right {
      z-index: 1;
      background-color: @table-bg;
      transition: background-color .3s ease-in;
    }

    &.@{prefix}-table--hoverable tbody tr:hover {

      .@{prefix}-table__cell--fixed-left,
      .@{prefix}-table__cell--fixed-right {
        background-color: @table-highlight-dark-bg-color;
      }
    }

    .@{prefix}-table__cell--fixed-left-last {
      &::before {
        z-index: -1;
        background-color: inherit;
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        content: "";
        width: @table-fixed-cell-box-shadow-width;
        transition: box-shadow .3s;
        pointer-events: none;
        z-index: -2;
        transform: translateX(100%);
      }
    }

    .@{prefix}-table__cell--fixed-right-first {
      &::before {
        z-index: -1;
        background-color: inherit;
      }

      &::after {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        content: "";
        width: @table-fixed-cell-box-shadow-width;
        transition: box-shadow .3s;
        pointer-events: none;
        z-index: -2;
        transform: translateX(-100%);
      }
    }

    &.@{prefix}-table--has-fixed {
      // 可向左滚动时，左边显示固定列显示阴影，右边同理
      .@{prefix}-table__content--scrollable-to-left {

        .@{prefix}-table__cell--fixed-left-last::after {
          box-shadow: inset 8px 0 8px -4px var(--td-table-shadow-color);
        }
      }

      .@{prefix}-table__content--scrollable-to-right {

        .@{prefix}-table__cell--fixed-right-first::after {
          box-shadow: inset -8px 0 8px -4px var(--td-table-shadow-color);
        }
      }
    }
  }

  // 列宽调整表头单元格
  .@{prefix}-table__cell-resizable {
    position: relative;

    .@{prefix}-table__cell--resizer {
      position: absolute;
      top: 0;
      right: -5px;
      bottom: 0;
      z-index: 10;
      width: 10px;
      cursor: col-resize;
    }
  }

  // 数据行禁用
  .@{prefix}-table__row--disabled {
    color: @table-row-disabled-color;
  }

  // 复杂表头容器
  .@{prefix}-table__cell--title {
    display: flex;
  }

  // 表格行可以拖拽
  &.@{prefix}-table__row--draggable {
    tbody {
      &.dragging {
        tr {
          transition: transform .2s;
          transform: translateY(0);
        }
      }
      // 比如分页数据变化时，不需要过渡
      tr {
        &.v-leave-active {
          display: none;
        }
      }
    }
  }
}

.@{prefix}-table__cell--sortable {
  position: relative;

  .@{prefix}-table__cell--title {
    display: flex;

    & > div:first-child {
      flex: 1;
      text-align: inherit;
    }

    .@{prefix}-table__cell--filter {
      margin-left: 10px;
      text-align: center;
    }
  }

  .@{prefix}-table__cell--sort-trigger {
    width: 20px;
    text-align: center;
  }
}

// 表格加载态
.@{prefix}-table--loading {
  position: relative;
}

.@{prefix}-table--loading-progressbar {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  background-color: @brand-color;
  animation: tTableProgressbar 2s ease-in-out;
  animation-fill-mode: both;
}

.@{prefix}-table--loading-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: @text-color-disabled;
}

.@{prefix}-table__expanded-cell {
  padding-left: 45px;
}

.@{prefix}-table__async-loading {
  text-align: center;
}

.@{prefix}-table__async-loading.@{prefix}-is-load-more {
  cursor: pointer;
}

// 默认空表格
.@{prefix}-table__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: @table-color-empty;
  border-bottom: 1px solid @table-border-color;
}

.@{prefix}-table__filter-icon,
.@{prefix}-table__sort-icon {
  margin-left: 8px;
  background-color: transparent;
  display: inline-block;
  cursor: pointer;

  &:hover {
    color: @table-icon-active-color;
  }
}

.@{prefix}-table__sort-icon {
  position: absolute;
}

.@{prefix}-table__filter-pop {

  .@{prefix}-table__filter-pop-content {
    margin: -8px;

    .@{prefix}-table__filter-pop-content-inner {
      padding: 16px;
    }

    .@{prefix}-radio-group {
      display: block;
      height: auto;
    }

    .@{prefix}-checkbox,
    .@{prefix}-radio {
      display: block;
      line-height: 34px;
    }

    .@{prefix}-table__filter-pop-content-button {
      border-top: 1px solid @table-border-color;
      padding: 16px;

      .t-button + .t-button {
        margin-left: @spacer-2;
      }
    }
  }
}

.@{prefix}-table__sort-icon--active {
  color: @table-icon-active-color;
}

.@{prefix}-table__double-icons {
  display: inline-grid;
  vertical-align: middle;
  width: 14px;
}

.@{prefix}-table__expand-box {
  padding: 10px 8px;
  display: inline-grid;
  vertical-align: middle;
  color: @table-icon-default-color;
  cursor: pointer;

  &:hover {
    color: @table-icon-active-color;
  }
}

@keyframes tTableProgressbar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.@{prefix}-table-expandable-icon-cell + .@{prefix}-table__cell--selectable[key="row-select"] {
  padding-left: 10px;
}

.@{prefix}-table__filter--bottom-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid @table-border-color;
  > .@{prefix}-button + .@{prefix}-button {
    margin-left: 8px;
  }
}

.@{prefix}-table td.@{prefix}-table__row--full {
  padding: 0;
}

.@{prefix}-table__row-filter-inner {
  position: sticky;
  left: 0;
  padding: @padding;
  text-align: center;
}

.@{prefix}-table__filter-result {
  display: flex;
  align-items: center;
  justify-content: center;
  > .@{prefix}-button {
    margin-left: 8px;
  }
}
